<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">爱天气</title>
    <link rel="stylesheet" th:href="@{/admin-lte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/admin-lte/bower_components/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/web-lte/css/comment.css}">
    <link rel="stylesheet" th:href="@{/web-lte/css/loading.css}">
    <link rel="stylesheet" th:href="@{/web-lte/css/search.css}">
    <link rel="stylesheet" th:href="@{/dist/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/web-lte/css/login-register.css}">
    <link rel="stylesheet" th:href="@{/web-lte/css/weather-app.css}">

    <script type="text/javascript" th:src="@{/dist/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/dist/jquery.pjax.js}"></script>
    <script type="text/javascript" th:src="@{/dist/jquery.form.js}"></script>
    <script type="text/javascript" th:src="@{/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/dist/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/dist/moment/moment.js}"></script>
    <script type="text/javascript" th:src="@{/dist/holder/holder.js}"></script>
    <script type="text/javascript" th:src="@{/web-lte/js/comment.widget.js}"></script>
    <script type="text/javascript" th:src="@{/dist/echarts/echarts.min.js}"></script>
    <script type="text/javascript" th:src="@{/web-lte/js/kit.js}"></script>
    <script th:src="@{/dist/sockjs/sockjs.min.js}"></script>
    <script th:src="@{/dist/stomp/stomp.js}"></script>
    <script th:src="@{/dist/layer/layer.js}"></script>
    <script th:src="@{/dist/layui/layui.js}"></script>
    <script type="text/javascript">
        $(function () {
            // 添加 CSRF 头
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");
            $.ajaxSetup({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader(header, token);
                }
            });

            $(document).ready(function () {
                if ($.support.pjax) {
                    $(document).pjax('a[data-pjax]', '#pjax-web-container', {
                        maxCacheLength: 0,
                        push: false,
                        replace: true,
                        fragment: '#pjax-web-container',
                        timeout: 8000
                    });

                    $('.g-menus a[data-pjax]').on('click', function () {
                        $('.g-menus .active').each(function (i, el) {
                            $(el).removeClass('active');
                        });
                        $(this).parent().addClass('active');
                    });
                }
            });

        });

        layui.use(['layim'], function () {
            var $ = layui.jquery,
                layim = layui.layim,
                stompClient;
            if (!!$('a.login')[0]) {
                return;
            }
            
            var socket = new SockJS('/socket');
            stompClient = Stomp.over(socket);
            var token = $("meta[name='_csrf']").attr('content');
            var header = $("meta[name='_csrf_header']").attr('content');
            var headers = {};
            headers[header] = token;
            stompClient.connect(headers, function (frame) {
                // 接收私信
                stompClient.subscribe('/user/queue/messages', function (rs) {
                    var body = JSON.parse(rs.body);
                    if (body.type === 1) {
                        layim.getMessage(body.data);
                        console.log(body.data);
                        stompClient.send("/app/messages/reply", {}, JSON.stringify({
                            type: 1,
                            data: {
                                type: 1,
                                id: [body.userNotifyId]
                            }
                        }));
                    }
                });
                stompClient.subscribe('/topic/update/announcement', function (rs) {
                    var body = JSON.parse(rs.body);
                    // $('.notify-announce-label').text('1');
                });
            });
            layim.config({
                title: '聊天',
                init: {
                    url: '/api/v1/im/init',
                    type: 'POST'
                },
                members: {
                    url: '',
                    data: {}
                },
                brief: false,
                min: true,
                isgroup: true,
                voice: false,
                copyright: true,
                find: '/api/v1/im/find.html',
                chatLog: '/api/v1/im/chat-log.html'
            }).on('ready', function (res) {
                $.get('/api/v1/im/unready?tag=message');
            }).on('sendMessage', function (data) {
                stompClient.send("/app/reply", {}, JSON.stringify({
                    type: 1,
                    data: data
                }));
            });
        });
    </script>
</head>
<body>
<header th:replace="/web/_fragments/top-menu :: top-menu"></header>
<div th:replace="/web/_fragments/login-register:: login-register"></div>
<div layout:fragment="content" id="pjax-web-container"></div>
<div th:replace="/web/_fragments/main-footer::main-footer"></div>
</body>
</html>